<template>
  <module
    ref="module"
    class="property-charges"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :barLineConfigTop="barLineConfigTop"
    :pyramidTop="pyramidTop"
    :gaugeBottom="gaugeBottom"
    :barLineConfigBottom="barLineConfigBottom"></module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'propertyCharges',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '物业收费',
        goPageUrl: '/home/property'
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '12' // 第二层显示内容
      },
      barLineConfigTop: {
        title: {
          text: '近一年实收(万元)'
        },
        axis: {
          yAxisConversion: 'w', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {},
        tooltipsConfig: {
          tipsColor: ['#2e92cb'],
          symbol: '万元',
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
          text: '近一年收缴率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      gaugeBottom: {
        title: {
          text: '本月收缴率'
        },
        angle: '',
        radius: '75%'
      }, // 本月满意率
      pyramidTop: {
        title: '本月实收(万元)',
        imgIndex: [0],
        tipsMessage: [{
          beforeMessage: '本月实收',
          message: 0,
          unit: '万元'
        }]
      },
      propertyInformation: {}, // 物业收费
      takeInformation: {}, // 物业收缴率
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        // 物业收费
        this.propertyApi.getOperateIncomeInfo({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.propertyInformation = data
            this.pyramidTop.tipsMessage[0].message = data.mthIncome
          } else {
            this.propertyInformation = {}
            this.pyramidTop.tipsMessage[0].message = 0
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.propertyInformation = {}
          this.pyramidTop.tipsMessage[0].message = 0
          this.$parent.showTips('请求失败，点击确认继续刷新')
          this.handleData()
        })
        // 物业收缴率
        this.propertyApi.getPropertyFeeCaptureInfo({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.takeInformation = data
            this.gaugeBottom.angle = data.payRate ? data.payRate.replace('%', '') : 0
          } else {
            this.takeInformation = {}
            this.gaugeBottom.angle = 0
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData2()
          }
        }, res => {
          this.takeInformation = {}
          this.gaugeBottom.angle = 0
          this.$parent.showTips('请求失败，点击确认继续刷新')
          this.handleData2()
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
        this.handleData2()
      }
    },
    handleData () {
      let data = this.propertyInformation
      let seriesData = []
      if (JSON.stringify(data) !== '{}') {
        data.hisMths.forEach(item => {
          seriesData.push(parseFloat(item.hisIncome))
        })
      }
      this.barLineConfigTop.seriesData = [{
        data: seriesData,
        name: '实收',
        colorIndex: 0,
        isBar: true
      }]
    },
    handleData2 () {
      let data = this.takeInformation
      let seriesData = []
      if (JSON.stringify(data) !== '{}') {
        data.hisMths.forEach(item => {
          seriesData.push(parseFloat(item.hisPayRate.replace('%', 0)).toFixed(2))
        })
      }
      this.barLineConfigBottom.seriesData = [{
        data: seriesData,
        name: '收缴率',
        colorIndex: 1
      }]
    },
    resizeChart () {
      this.$refs.module.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.propertyChargesTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.propertyChargesTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.propertyChargesTimer)
  }
}
</script>
<style lang="scss" scoped>
.property-charges {
  .module-content {
    width: 100%;
    height: 100%;
  }
  & /deep/ .module {
    padding-top: 0;
  }
}
</style>
